<template>
	<view class="planet-container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="header-center">
				<text class="page-title">{{ currentPlanet ? currentPlanet.name : '星球详情' }}</text>
			</view>
			<view class="header-right">
				<text class="share-icon">📤</text>
			</view>
		</view>

		<!-- 星球轨道动画区域 -->
		<view class="planet-content-canvas">
			<!-- Canvas容器 -->
			<canvas 
				class="planet-canvas" 
				canvas-id="planetCanvas"
				:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
				@touchstart="onTouchStart"
				@touchmove="onTouchMove"
				@touchend="onTouchEnd"
				@tap="onCanvasTap"
			></canvas>
			
			<!-- 控制面板 -->
			<view class="control-panel">
				<view class="control-item" @click="toggleAnimation">
					<text class="control-icon">{{ isAnimating ? '⏸️' : '▶️' }}</text>
					<text class="control-text">{{ isAnimating ? '暂停' : '播放' }}</text>
				</view>
				<view class="control-item" @click="resetView">
					<text class="control-icon">🔄</text>
					<text class="control-text">重置视角</text>
				</view>
				<view class="control-item" @click="toggleAutoRotate">
					<text class="control-icon">{{ camera.autoRotate ? '🔄' : '⏸️' }}</text>
					<text class="control-text">{{ camera.autoRotate ? '自动旋转' : '停止旋转' }}</text>
				</view>
				<view class="control-item" @click="toggleFullscreen">
					<text class="control-icon">🔍</text>
					<text class="control-text">全屏</text>
				</view>
			</view>
			
			<!-- 星球选择器 -->
			<view class="planet-selector">
				<view class="selector-header">
					<text class="selector-title">选择星球</text>
				</view>
				<view class="planet-list">
					<view 
						v-for="planet in solarSystem.planets" 
						:key="planet.name"
						class="planet-item"
						:class="{ active: currentPlanet && currentPlanet.name === planet.name }"
						@click="selectPlanet(planet)"
					>
						<text class="planet-emoji-small">{{ planet.emoji }}</text>
						<text class="planet-name-small">{{ planet.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 星球信息面板 -->
			<view class="planet-info" v-if="currentPlanet">
				<view class="info-header">
					<text class="planet-emoji">{{ currentPlanet.emoji }}</text>
					<text class="planet-name">{{ currentPlanet.name }}</text>
				</view>
				<view class="info-content">
					<view class="info-item">
						<text class="info-label">轨道半径:</text>
						<text class="info-value">{{ currentPlanet.orbitRadius }} AU</text>
					</view>
					<view class="info-item">
						<text class="info-label">公转周期:</text>
						<text class="info-value">{{ currentPlanet.orbitPeriod }} 天</text>
					</view>
					<view class="info-item">
						<text class="info-label">自转周期:</text>
						<text class="info-value">{{ currentPlanet.rotationPeriod }} 小时</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'PlanetPage',
	data() {
		return {
			// Canvas相关
			canvasWidth: 0,
			canvasHeight: 0,
			ctx: null,
			animationId: null,
			isAnimating: true,
			
			// 触摸控制
			touchStartX: 0,
			touchStartY: 0,
			rotationX: 0,
			rotationY: 0,
			isDragging: false,
			
			// 当前星球数据
			currentPlanet: null,
			
			// 太阳系数据
			solarSystem: {
				sun: {
					name: '太阳',
					emoji: '☀️',
					radius: 30,
					color: '#FFD700',
					glowColor: '#FFA500',
					x: 0,
					y: 0,
					z: 0
				},
				planets: [
					{
						name: '水星',
						emoji: '☿',
						radius: 8,
						color: '#A0522D',
						orbitRadius: 60,
						orbitSpeed: 0.02,
						rotationSpeed: 0.05,
						orbitPeriod: 88,
						rotationPeriod: 1408,
						angle: 0,
						rotationAngle: 0,
						orbitInclination: 7, // 轨道倾角
						zOffset: 0 // Z轴偏移
					},
					{
						name: '金星',
						emoji: '♀',
						radius: 12,
						color: '#FFA500',
						orbitRadius: 90,
						orbitSpeed: 0.015,
						rotationSpeed: 0.03,
						orbitPeriod: 225,
						rotationPeriod: 5832,
						angle: 45,
						rotationAngle: 0,
						orbitInclination: 3.4,
						zOffset: 0
					},
					{
						name: '地球',
						emoji: '🌍',
						radius: 13,
						color: '#4169E1',
						orbitRadius: 120,
						orbitSpeed: 0.01,
						rotationSpeed: 0.04,
						orbitPeriod: 365,
						rotationPeriod: 24,
						angle: 90,
						rotationAngle: 0,
						orbitInclination: 0,
						zOffset: 0
					},
					{
						name: '火星',
						emoji: '♂',
						radius: 10,
						color: '#DC143C',
						orbitRadius: 150,
						orbitSpeed: 0.008,
						rotationSpeed: 0.035,
						orbitPeriod: 687,
						rotationPeriod: 25,
						angle: 135,
						rotationAngle: 0,
						orbitInclination: 1.9,
						zOffset: 0
					},
					{
						name: '木星',
						emoji: '♃',
						radius: 25,
						color: '#DAA520',
						orbitRadius: 200,
						orbitSpeed: 0.005,
						rotationSpeed: 0.06,
						orbitPeriod: 4333,
						rotationPeriod: 10,
						angle: 180,
						rotationAngle: 0,
						orbitInclination: 1.3,
						zOffset: 0
					},
					{
						name: '土星',
						emoji: '♄',
						radius: 22,
						color: '#F4A460',
						orbitRadius: 250,
						orbitSpeed: 0.003,
						rotationSpeed: 0.045,
						orbitPeriod: 10759,
						rotationPeriod: 11,
						angle: 225,
						rotationAngle: 0,
						orbitInclination: 2.5,
						zOffset: 0
					}
				]
			},
			
			// 3D视角控制
			camera: {
				rotationX: 0, // 绕X轴旋转
				rotationY: 0, // 绕Y轴旋转
				rotationZ: 0, // 绕Z轴旋转
				distance: 1,  // 缩放距离
				autoRotate: true, // 自动旋转
				autoRotateSpeed: 0.002 // 自动旋转速度
			}
		}
	},
	
	onLoad(options) {
		console.log('Planet页面加载')
		
		// 延迟初始化Canvas，确保页面完全加载
		setTimeout(() => {
			this.initCanvas()
			this.startAnimation()
		}, 100)
		
		// 如果有传入星球参数，设置当前星球
		if (options.planetId) {
			const planet = this.solarSystem.planets.find(p => p.name === options.planetId)
			if (planet) {
				this.currentPlanet = planet
			}
		}
	},
	
	onUnload() {
		this.stopAnimation()
	},
	
	methods: {
		// 初始化Canvas
		initCanvas() {
			try {
				const systemInfo = uni.getSystemInfoSync()
				this.canvasWidth = systemInfo.windowWidth
				this.canvasHeight = systemInfo.windowHeight - 100 // 减去头部高度
				
				// 获取Canvas上下文
				this.ctx = uni.createCanvasContext('planetCanvas', this)
				
				if (!this.ctx) {
					throw new Error('Canvas上下文创建失败')
				}
				
				console.log('Canvas初始化完成:', this.canvasWidth, this.canvasHeight)
			} catch (error) {
				console.error('Canvas初始化失败:', error)
				uni.showToast({
					title: 'Canvas初始化失败',
					icon: 'none'
				})
			}
		},
		
		// 开始动画
		startAnimation() {
			if (this.animationId) {
				return
			}
			
			this.isAnimating = true
			this.animate()
		},
		
		// 停止动画
		stopAnimation() {
			if (this.animationId) {
				cancelAnimationFrame(this.animationId)
				this.animationId = null
			}
			this.isAnimating = false
		},
		
		// 动画循环
		animate() {
			if (!this.isAnimating) {
				return
			}
			
			this.updatePlanets()
			this.drawScene()
			
			this.animationId = requestAnimationFrame(() => {
				this.animate()
			})
		},
		
		// 更新行星位置
		updatePlanets() {
			this.solarSystem.planets.forEach(planet => {
				// 更新公转角度
				planet.angle += planet.orbitSpeed
				if (planet.angle >= 360) {
					planet.angle -= 360
				}
				
				// 更新自转角度
				planet.rotationAngle += planet.rotationSpeed
				if (planet.rotationAngle >= 360) {
					planet.rotationAngle -= 360
				}
				
				// 更新Z轴位置（轨道倾角效果）
				const inclinationRad = planet.orbitInclination * Math.PI / 180
				planet.zOffset = Math.sin(planet.angle * Math.PI / 180) * planet.orbitRadius * Math.sin(inclinationRad)
			})
			
			// 更新相机自动旋转
			if (this.camera.autoRotate) {
				this.camera.rotationY += this.camera.autoRotateSpeed
			}
		},
		
		// 绘制场景
		drawScene() {
			if (!this.ctx) {
				console.warn('Canvas上下文未初始化')
				return
			}
			
			const ctx = this.ctx
			const centerX = this.canvasWidth / 2
			const centerY = this.canvasHeight / 2
			
			// 清空画布
			ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
			
			// 绘制背景
			this.drawBackground(ctx)
			
			// 绘制轨道
			this.drawOrbits(ctx, centerX, centerY)
			
			// 绘制太阳
			this.drawSun(ctx, centerX, centerY)
			
			// 绘制行星
			this.drawPlanets(ctx, centerX, centerY)
			
			// 应用画布
			ctx.draw()
		},
		
		// 绘制背景
		drawBackground(ctx) {
			// uniapp Canvas不支持渐变，使用纯色背景
			ctx.setFillStyle('#0B1426')
			ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
			
			// 绘制星空效果
			this.drawStars(ctx)
		},
		
		// 绘制星空背景
		drawStars(ctx) {
			// 使用固定的星星位置，避免闪烁
			if (!this.stars) {
				this.stars = []
				for (let i = 0; i < 80; i++) {
					this.stars.push({
						x: Math.random() * this.canvasWidth,
						y: Math.random() * this.canvasHeight,
						size: Math.random() * 1.5 + 0.5,
						brightness: Math.random() * 0.5 + 0.3
					})
				}
			}
			
			// 绘制星星
			this.stars.forEach(star => {
				ctx.setFillStyle(`rgba(255, 255, 255, ${star.brightness})`)
				ctx.beginPath()
				ctx.arc(star.x, star.y, star.size, 0, 2 * Math.PI)
				ctx.fill()
			})
		},
		
		// 绘制轨道
		drawOrbits(ctx, centerX, centerY) {
			ctx.setStrokeStyle('rgba(255, 255, 255, 0.1)')
			ctx.setLineWidth(1)
			
			this.solarSystem.planets.forEach(planet => {
				// 绘制3D椭圆轨道
				this.draw3DOrbit(ctx, centerX, centerY, planet)
			})
		},
		
		// 绘制3D椭圆轨道
		draw3DOrbit(ctx, centerX, centerY, planet) {
			const inclinationRad = planet.orbitInclination * Math.PI / 180
			const points = []
			
			// 生成轨道上的点
			for (let angle = 0; angle <= 360; angle += 5) {
				const rad = angle * Math.PI / 180
				const x = centerX + Math.cos(rad) * planet.orbitRadius
				const y = centerY + Math.sin(rad) * planet.orbitRadius
				const z = Math.sin(rad) * planet.orbitRadius * Math.sin(inclinationRad)
				
				// 应用3D变换
				const transformed = this.apply3DTransform(x, y, z)
				points.push(transformed)
			}
			
			// 绘制轨道线
			ctx.beginPath()
			ctx.moveTo(points[0].x, points[0].y)
			
			for (let i = 1; i < points.length; i++) {
				ctx.lineTo(points[i].x, points[i].y)
			}
			
			ctx.stroke()
		},
		
		// 绘制太阳
		drawSun(ctx, centerX, centerY) {
			const sun = this.solarSystem.sun
			
			// 绘制太阳光晕（多层圆形模拟渐变效果）
			for (let i = 3; i >= 1; i--) {
				const alpha = 0.3 / i
				ctx.setFillStyle(`rgba(255, 215, 0, ${alpha})`)
				ctx.beginPath()
				ctx.arc(centerX, centerY, sun.radius * i, 0, 2 * Math.PI)
				ctx.fill()
			}
			
			// 绘制太阳本体
			ctx.setFillStyle(sun.color)
			ctx.beginPath()
			ctx.arc(centerX, centerY, sun.radius, 0, 2 * Math.PI)
			ctx.fill()
			
			// 绘制太阳高光
			ctx.setFillStyle('rgba(255, 255, 255, 0.6)')
			ctx.beginPath()
			ctx.arc(centerX - sun.radius / 3, centerY - sun.radius / 3, sun.radius / 3, 0, 2 * Math.PI)
			ctx.fill()
		},
		
		// 绘制行星
		drawPlanets(ctx, centerX, centerY) {
			// 按Z轴深度排序，远的先绘制
			const planetsWithDepth = this.solarSystem.planets.map(planet => {
				const inclinationRad = planet.orbitInclination * Math.PI / 180
				const x = centerX + Math.cos(planet.angle * Math.PI / 180) * planet.orbitRadius
				const y = centerY + Math.sin(planet.angle * Math.PI / 180) * planet.orbitRadius
				const z = Math.sin(planet.angle * Math.PI / 180) * planet.orbitRadius * Math.sin(inclinationRad)
				
				// 应用3D变换
				const transformed = this.apply3DTransform(x, y, z)
				
				return {
					...planet,
					screenX: transformed.x,
					screenY: transformed.y,
					depth: transformed.z,
					scale: transformed.scale
				}
			}).sort((a, b) => b.depth - a.depth) // 按深度排序
			
			// 绘制行星轨道痕迹
			this.solarSystem.planets.forEach(planet => {
				this.drawOrbitTrail(ctx, centerX, centerY, planet)
			})
			
			// 按深度绘制行星
			planetsWithDepth.forEach(planet => {
				// 绘制行星本体
				this.drawPlanetBody3D(ctx, planet.screenX, planet.screenY, planet)
				
				// 如果是当前选中的行星，绘制高亮效果
				if (this.currentPlanet && this.currentPlanet.name === planet.name) {
					this.drawPlanetHighlight3D(ctx, planet.screenX, planet.screenY, planet)
				}
			})
		},
		
		// 3D变换函数
		apply3DTransform(x, y, z) {
			// 应用相机旋转
			const cosX = Math.cos(this.camera.rotationX)
			const sinX = Math.sin(this.camera.rotationX)
			const cosY = Math.cos(this.camera.rotationY)
			const sinY = Math.sin(this.camera.rotationY)
			const cosZ = Math.cos(this.camera.rotationZ)
			const sinZ = Math.sin(this.camera.rotationZ)
			
			// 绕X轴旋转
			let newY = y * cosX - z * sinX
			let newZ = y * sinX + z * cosX
			
			// 绕Y轴旋转
			let newX = x * cosY + newZ * sinY
			newZ = -x * sinY + newZ * cosY
			
			// 绕Z轴旋转
			const finalX = newX * cosZ - newY * sinZ
			const finalY = newX * sinZ + newY * cosZ
			
			// 应用透视投影
			const distance = 1000
			const scale = distance / (distance + newZ)
			
			return {
				x: finalX * scale * this.camera.distance,
				y: finalY * scale * this.camera.distance,
				z: newZ,
				scale: scale * this.camera.distance
			}
		},
		
		// 绘制轨道痕迹
		drawOrbitTrail(ctx, centerX, centerY, planet) {
			ctx.setStrokeStyle(`rgba(${this.getPlanetColorRGB(planet.color)}, 0.2)`)
			ctx.setLineWidth(2)
			
			ctx.beginPath()
			ctx.arc(centerX, centerY, planet.orbitRadius, 0, 2 * Math.PI)
			ctx.stroke()
		},
		
		// 绘制3D行星本体
		drawPlanetBody3D(ctx, x, y, planet) {
			const radius = planet.radius * planet.scale
			
			// 绘制行星本体
			ctx.setFillStyle(planet.color)
			ctx.beginPath()
			ctx.arc(x, y, radius, 0, 2 * Math.PI)
			ctx.fill()
			
			// 绘制行星高光（根据3D位置调整）
			ctx.setFillStyle('rgba(255, 255, 255, 0.4)')
			ctx.beginPath()
			ctx.arc(x - radius / 3, y - radius / 3, radius / 3, 0, 2 * Math.PI)
			ctx.fill()
			
			// 绘制行星阴影
			ctx.setFillStyle('rgba(0, 0, 0, 0.2)')
			ctx.beginPath()
			ctx.arc(x + radius / 3, y + radius / 3, radius / 3, 0, 2 * Math.PI)
			ctx.fill()
			
			// 绘制行星环（土星）
			if (planet.name === '土星') {
				this.drawSaturnRings(ctx, x, y, planet)
			}
		},
		
		// 绘制土星环
		drawSaturnRings(ctx, x, y, planet) {
			const ringRadius = planet.radius * 1.5 * planet.scale
			const ringWidth = planet.radius * 0.3 * planet.scale
			
			// 绘制外环
			ctx.setStrokeStyle('rgba(244, 164, 96, 0.6)')
			ctx.setLineWidth(ringWidth)
			ctx.beginPath()
			ctx.arc(x, y, ringRadius, 0, 2 * Math.PI)
			ctx.stroke()
			
			// 绘制内环
			ctx.setStrokeStyle('rgba(244, 164, 96, 0.3)')
			ctx.setLineWidth(ringWidth * 0.7)
			ctx.beginPath()
			ctx.arc(x, y, ringRadius * 0.8, 0, 2 * Math.PI)
			ctx.stroke()
		},
		
		// 绘制3D行星高亮效果
		drawPlanetHighlight3D(ctx, x, y, planet) {
			const radius = planet.radius * planet.scale
			
			// 绘制选择环
			ctx.setStrokeStyle('rgba(255, 255, 255, 0.8)')
			ctx.setLineWidth(3)
			ctx.beginPath()
			ctx.arc(x, y, radius + 5, 0, 2 * Math.PI)
			ctx.stroke()
			
			// 绘制脉冲效果
			const pulseRadius = radius + 10 + Math.sin(Date.now() * 0.01) * 5
			ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)')
			ctx.setLineWidth(1)
			ctx.beginPath()
			ctx.arc(x, y, pulseRadius, 0, 2 * Math.PI)
			ctx.stroke()
		},
		
		// 获取颜色RGB值 - 兼容uniapp
		getPlanetColorRGB(color) {
			// 预定义颜色映射，避免使用DOM API
			const colorMap = {
				'#A0522D': '160, 82, 45',   // 水星
				'#FFA500': '255, 165, 0',   // 金星
				'#4169E1': '65, 105, 225',  // 地球
				'#DC143C': '220, 20, 60',   // 火星
				'#DAA520': '218, 165, 32',  // 木星
				'#F4A460': '244, 164, 96',  // 土星
				'#FFD700': '255, 215, 0'    // 太阳
			}
			return colorMap[color] || '255, 255, 255'
		},
		
		// 颜色变亮 - 兼容uniapp
		lightenColor(color, amount) {
			// 预定义亮色版本
			const lightColorMap = {
				'#A0522D': '#C17A5A',   // 水星亮色
				'#FFA500': '#FFB84D',   // 金星亮色
				'#4169E1': '#6B8CE6',   // 地球亮色
				'#DC143C': '#E6395C',   // 火星亮色
				'#DAA520': '#E6C04D',   // 木星亮色
				'#F4A460': '#F7C280',   // 土星亮色
				'#FFD700': '#FFE066'    // 太阳亮色
			}
			return lightColorMap[color] || color
		},
		
		// 触摸事件处理
		onTouchStart(e) {
			const touch = e.touches[0]
			this.touchStartX = touch.clientX
			this.touchStartY = touch.clientY
			this.isDragging = true
			
			// 停止自动旋转
			this.camera.autoRotate = false
		},
		
		onTouchMove(e) {
			if (!this.isDragging) return
			
			const touch = e.touches[0]
			const deltaX = touch.clientX - this.touchStartX
			const deltaY = touch.clientY - this.touchStartY
			
			// 更新3D相机旋转角度
			this.camera.rotationY += deltaX * 0.005
			this.camera.rotationX += deltaY * 0.005
			
			// 限制X轴旋转范围
			this.camera.rotationX = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, this.camera.rotationX))
			
			this.touchStartX = touch.clientX
			this.touchStartY = touch.clientY
		},
		
		onTouchEnd() {
			this.isDragging = false
			
			// 延迟恢复自动旋转
			setTimeout(() => {
				this.camera.autoRotate = true
			}, 2000)
		},
		
		// 点击Canvas选择星球
		onCanvasTap(e) {
			if (this.isDragging) return // 如果正在拖拽，不处理点击
			
			const touch = e.detail
			const x = touch.x
			const y = touch.y
			
			// 检查是否点击到了某个星球
			const centerX = this.canvasWidth / 2
			const centerY = this.canvasHeight / 2
			
			// 按深度排序，检查最近的星球
			const planetsWithDepth = this.solarSystem.planets.map(planet => {
				const inclinationRad = planet.orbitInclination * Math.PI / 180
				const planetX = centerX + Math.cos(planet.angle * Math.PI / 180) * planet.orbitRadius
				const planetY = centerY + Math.sin(planet.angle * Math.PI / 180) * planet.orbitRadius
				const planetZ = Math.sin(planet.angle * Math.PI / 180) * planet.orbitRadius * Math.sin(inclinationRad)
				
				// 应用3D变换
				const transformed = this.apply3DTransform(planetX, planetY, planetZ)
				
				return {
					...planet,
					screenX: transformed.x,
					screenY: transformed.y,
					depth: transformed.z,
					scale: transformed.scale
				}
			}).sort((a, b) => b.depth - a.depth) // 按深度排序
			
			// 从最近的开始检查
			for (let planet of planetsWithDepth) {
				const distance = Math.sqrt((x - planet.screenX) ** 2 + (y - planet.screenY) ** 2)
				const clickRadius = planet.radius * planet.scale + 10
				
				if (distance <= clickRadius) {
					this.selectPlanet(planet)
					break
				}
			}
		},
		
		// 选择星球
		selectPlanet(planet) {
			this.currentPlanet = planet
			uni.showToast({
				title: `选中${planet.name}`,
				icon: 'none'
			})
		},
		
		// 控制方法
		toggleAnimation() {
			if (this.isAnimating) {
				this.stopAnimation()
			} else {
				this.startAnimation()
			}
		},
		
		resetView() {
			this.camera.rotationX = 0
			this.camera.rotationY = 0
			this.camera.rotationZ = 0
			this.camera.distance = 1
		},
		
		toggleAutoRotate() {
			this.camera.autoRotate = !this.camera.autoRotate
		},
		
		toggleFullscreen() {
			// 切换全屏模式
			uni.showToast({
				title: '全屏功能开发中',
				icon: 'none'
			})
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.planet-container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg, #0B1426 0%, #1a1a2e 50%, #16213e 100%);
	position: relative;
	overflow: hidden;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(20rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40rpx;
	z-index: 1000;
	border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
	
	.header-left, .header-right {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		transition: all 0.3s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.2);
			transform: scale(0.95);
		}
	}
	
	.back-icon, .share-icon {
		font-size: 40rpx;
		color: #ffffff;
	}
	
	.header-center {
		flex: 1;
		text-align: center;
		
		.page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
		}
	}
}

.planet-content-canvas {
	position: relative;
	width: 100%;
	height: 100vh;
	padding-top: 100rpx;
}

.planet-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.control-panel {
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 40rpx;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(20rpx);
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	
	.control-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
		padding: 20rpx;
		border-radius: 30rpx;
		transition: all 0.3s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.1);
			transform: scale(0.95);
		}
		
		.control-icon {
			font-size: 40rpx;
		}
		
		.control-text {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.planet-selector {
	position: absolute;
	top: 120rpx;
	left: 40rpx;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(20rpx);
	border-radius: 30rpx;
	padding: 30rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	max-width: 300rpx;
	
	.selector-header {
		margin-bottom: 20rpx;
		
		.selector-title {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
			font-weight: 500;
		}
	}
	
	.planet-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		
		.planet-item {
			display: flex;
			align-items: center;
			gap: 15rpx;
			padding: 15rpx;
			border-radius: 20rpx;
			transition: all 0.3s ease;
			cursor: pointer;
			
			&:active {
				background: rgba(255, 255, 255, 0.1);
				transform: scale(0.95);
			}
			
			&.active {
				background: rgba(255, 255, 255, 0.2);
				border: 2rpx solid rgba(255, 255, 255, 0.3);
			}
			
			.planet-emoji-small {
				font-size: 32rpx;
			}
			
			.planet-name-small {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
}

.planet-info {
	position: absolute;
	top: 120rpx;
	right: 40rpx;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(20rpx);
	border-radius: 30rpx;
	padding: 40rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	max-width: 400rpx;
	
	.info-header {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 30rpx;
		
		.planet-emoji {
			font-size: 60rpx;
		}
		
		.planet-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}
	
	.info-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.info-label {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
			}
			
			.info-value {
				font-size: 28rpx;
				color: #ffffff;
				font-weight: 500;
			}
		}
	}
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
	.planet-selector {
		left: 20rpx;
		right: 20rpx;
		max-width: none;
		top: 100rpx;
		
		.planet-list {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			
			.planet-item {
				flex: 0 0 auto;
				min-width: 120rpx;
			}
		}
	}
	
	.planet-info {
		right: 20rpx;
		left: 20rpx;
		max-width: none;
		top: 200rpx;
	}
	
	.control-panel {
		bottom: 20rpx;
		gap: 20rpx;
		padding: 15rpx 30rpx;
		
		.control-item {
			padding: 15rpx;
			
			.control-icon {
				font-size: 32rpx;
			}
			
			.control-text {
				font-size: 20rpx;
			}
		}
	}
}
</style>
